﻿@using DevExpress.Blazor
@using DevExpress.Blazor.Internal
@using DevExpress.ExpressApp.Blazor.Components
@using DevExpress.ExpressApp.Blazor.Templates
@using EasyXaf.LowCode.WorkflowEditors.Models.Activities
@using Microsoft.AspNetCore.Components.Web

<div class="node-detail-component">
    <div class="card w-100">
        <div class="card-header">
            <div class="node-icon" @onclick="ChangeViewMode" @onclick:stopPropagation>
                <XafImage ImageName="@Node.ImageName" Size="16" Color="@Node.Color" />
            </div>
            <div class="node-caption">
                @if (CaptionEditing)
                {
                    <DxTextBox @ref="CaptionTextBox"
                               @bind-Text="CaptionValue"
                               @onfocusout="EndEditCaption"
                               @onkeydown="ProcessTextBoxKeyDown"
                               SizeMode="SizeMode.Small"
                               BindValueMode="BindValueMode.OnLostFocus" />
                }
                else
                {
                    <span @ondblclick="BeginEditCaption" @ondblclick:stopPropagation>
                        @Node.Caption
                    </span>
                }
            </div>
            <div class="node-tools">
                @if (Node is IContainerActivity)
                {
                    <NodeAction Tooltip="进入" IconName="Actions_Arrow4RightDown" IconColor="#7F8C8D" Click="EnterContainer" />
                }
                @if (!IsReadOnly)
                {
                    <NodeAction Tooltip="更多..." IconName="Action_More" IconColor="#7F8C8D" Click="ShowNodeMenu" />
                }
            </div>
        </div>
        <div class="card-body">
            @if (CommentEditing)
            {
                <DxMemo @ref="CommentMemo"
                        @bind-Text="CommentValue"
                        @onfocusout="EndEditComment"
                        @onkeydown="ProcessTextBoxKeyDown"
                        CssClass="node-comment-editor"
                        Rows="4"
                        SizeMode="SizeMode.Small"
                        BindValueMode="BindValueMode.OnLostFocus" />
            }
            else if (!string.IsNullOrWhiteSpace(Node.Comment))
            {
                <div class="node-comment">
                    <div class="alert alert-warning" @ondblclick="BeginEditComment" @ondblclick:stopPropagation>
                        @foreach (var comment in Node.Comment.Replace("\r\n", "\n").Split('\n'))
                        {
                            <span class="d-block">@comment</span>
                        }
                    </div>
                    @if (!IsReadOnly)
                    {
                        <NodeAction CssClass="delete-comment-action"
                                    Tooltip="删除"
                                    IconName="Actions_Delete"
                                    IconColor="#7F8C8D80"
                                    IconSize="14"
                                    Click="DeleteComment" />
                    }
                </div>
            }
            @if (_nodeView != null)
            {
                <DxStyleContainer SizeMode="SizeMode.Small">
                    <ViewSiteComponent View="_nodeView" />
                </DxStyleContainer>
            }
        </div>
    </div>
</div>
